<template>
	<view class="login_page">
		<image src="/static/index/loginBg.png" class="login_img"></image>
		<view class="content">
			<text class="title">HealthPulse<text class="title small">+</text></text>
			<text>一键拍照分析健康状态，用心记录您的健康！</text>
		</view>
		<button class="login_button" @click="wxLogin">
			微信登录
		</button>

	</view>
</template>

<script setup>
	import {
		loginRequest
	} from '/api/login/login.js'

	// const onChooseAvatar = (e) => {
	// 	console.log(e, '选择头像返回的数据');
	// 	uni.setStorageSync("avatar",e.detail.avatarUrl);
	// }
	//微信一键登录
	const wxLogin = () => {
		//获取用户信息uni.getUserInfo
		uni.getUserInfo({
			desc: '登录的数据',
			success(user) {
				console.log(user, '返回用户的信息')
				//请求登录接口
				uni.login({
					//微信登录成功回调
					success: function(loginRes) {
						console.log(loginRes, '请求微信登录返回的数据')
						//构造发送到后端的数据
						let data = {
							code: loginRes.code, //从微信获取的临时登录凭证
						}
						//向后端发送登录请求
						loginRequest(data).then(res => {
							console.log(res, '后端返回的数据') //登录成功后端返回的结果
							uni.setStorageSync('token', res.data.token) //保存用户信息到本地缓存
							uni.setStorageSync('avatarUrl', res.data.avatarUrl) //保存用户信息到本地缓存
							uni.setStorageSync('nickname', res.data.nickname) //保存用户信息到本地缓存
							if( res.data.token){
								uni.switchTab({
									url: '/pages/index/index',
								})
						}
							
						}).catch(error => {
							console.log(error, '请求后端失败') //登录失败返回的结果
						})
					},
					//微信登录失败的回调
					fail: function(err) {
						console.log(err, '微信登录失败')
					}
				})
			}
		})

	}
</script>

<style long="sass">
	.login_page {
		height: 100vh;
		background: linear-gradient(45deg, #00BCFF, #00D6ED);
		display: flex;
		flex-flow: column wrap;
		justify-content: space-evenly;
		align-items: center;
	}

	.login_button {
		width: 50%;
		border-radius: 50rpx;
		background-color: #2569B7;
		color: white;
	}
	.login_button:active{
		background-color: #c6c6c6;
	}
	.title{
		font-size: 84rpx;
		color: white;
		/* 添加动画 */
		animation: titleAnimation 2s ease-in-out infinite alternate;
		color: white;
		text-shadow: 10rpx 5rpx 7rpx #2569B7;
	}

	@keyframes titleAnimation {
		0% {
			transform: translateY(0);
			text-shadow: 10rpx 5rpx 7rpx #2569B7;
		}
		100% {
			transform: translateY(-20rpx);
			text-shadow: 10rpx 15rpx 15rpx #2569B7;
		}
	}

	.content{
		display: flex;
		flex-flow: column wrap;
		justify-content: space-evenly;
		align-items: center;
		position: relative;
	}
	text{
		color: white;
		text-shadow: 2rpx 5rpx 7rpx #2569B7;
	}
	.small{
		/* font-size:55rpx; */
		position: absolute;
		bottom:2rpx;
	}
</style>